
<template>
	<div class="zhibo">
		<top></top>
		<div class="center">
			<left></left>
			<div class="right">
        <div class="where">当前位置：分销后台><router-link to="/mySupplier">直播绩效统计</router-link></div>
        <div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
				<div class="title">直播绩效统计</div>
				<div class="add flex">
          <el-button @click="daoru1" size="small" type="primary">{{name1}}</el-button>
          <!-- <upload-excel-component @on-selected-file="exportData" class="btnp" :buttonName="name1"></upload-excel-component> -->
          <el-button @click="xiazai1" type="text" size="small">下载导入模板</el-button>
          <el-button @click="shanchu1" size="small" type="danger">删除值班数据</el-button>
          <el-button @click="daoru2" size="small" type="primary">{{name2}}</el-button>
          <!-- <upload-excel-component @on-selected-file="exportData" class="btnp" :buttonName="name2"></upload-excel-component> -->
          <el-button @click="xiazai2"  type="text" size="small">下载导入模板</el-button>
          <el-button @click="shanchu2" size="small" type="danger">删除直播订单数据</el-button>
        </div>
        <div style=" text-align: right; margin-right: 20px; margin-bottom: 20px;">
          <el-date-picker v-model="time" value-format="yyyy-MM" type="month" size="small" placeholder="选择月份" @change="changetime"></el-date-picker>
        </div>
				<div class="con" v-loading="loading">
					<div class="list">
						<div class="th">直播人</div>
						<div class="th">直播时长</div>
						<div class="th">销售数量</div>
            <div class="th">下载明细</div>
					</div>
					<div class="list" v-for="item in list" :key="item.id">
                        <div class="td" v-if="item.name == ''">未匹配</div>
						<div class="td" v-if="item.name != ''">{{item.name}}</div>
                        <div class="td">{{item.sum_hours}}</div>
						<div class="td">{{item.order_count}}</div>
						<div class="td"><el-button type="primary" size="mini" plain @click="xiazai3(item.name,item.month)">下载</el-button></div>
					</div>
					<el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
				</div>
			</div>
		</div>
		<el-dialog title="上传表单" :visible.sync="log" width="440px">
			  <div class="flex" style="line-height: 32px;">
          <div>选择文件：</div>
          <div v-if="shangchuanleibie == 1"><upload-excel-component @on-selected-file="exportData" class="btnp" :buttonName="name3"></upload-excel-component></div>
          <div v-if="shangchuanleibie == 2">
            <el-upload class="avatar-uploader" action="#" :on-change="uploadok" :auto-upload="false" :show-file-list="false">
              <el-button v-if="!shangchuandewenjian" size="small" type="primary">点击上传</el-button>
              <div v-if="shangchuandewenjian">已选择文件</div>
            </el-upload>
          </div>
			  </div>
        <div class="flex" style="line-height: 32px;">
          <div>选择月份：</div>
          <div><el-date-picker v-model="time1"  value-format="yyyy-MM" type="month" size="small" placeholder="选择月份"></el-date-picker></div>
        </div>
			  <span slot="footer" class="dialog-footer">
				<el-button @click="log = false">取消</el-button>
				<el-button type="primary" @click="shangchuan" :loading="shangchuanzhong">上传</el-button>
			  </span>
		</el-dialog>
		<foot></foot>
    <notice></notice>
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
  import notice from '@/components/notice.vue'
  import moment from "moment";
  import UploadExcelComponent from "@/components/UploadExcel/index.vue";
	export default{
		components: {
			left,top,foot,notice,UploadExcelComponent
		},
		name: 'zhibo',
		data(){
			return{
        name1:"导入值班数据",
        name2:"导入直播订单表",
        name3:"",
				msg:"hello",
				loading:false,
				log:false,
				disid:"",
				result:"",
				list:"",
				total:0,
				pagesize:20,
				page:1,
        time:"",
        time1:"",
        url:"",
        shangchuanshuju:"",
        shangchuanleibie:0,
        shangchuanzhong:false,

        shangchuandewenjian:""
			}
		},
		created() {

      this.time = moment().format("YYYY-MM");
      this.time1 = moment().format("YYYY-MM");
			this.getlist();

		},

		methods:{
      uploadok: function(file) {
          this.shangchuandewenjian = file.raw
      },
      shangchuanxin:function(){
        var formData = new FormData();
        formData.append("file", this.shangchuandewenjian);
        formData.append("month", this.time1);
        axios.post('/api/tool/broadorders/import2',formData)
         .then(response => {
            if(response.data.msg.code == 0){
                this.shangchuandewenjian = ''
                this.$message.success("上传成功");
                this.getlist()
                this.log = false
            }else{
                that.$message.error(response.data.msg.info);
            }

         })
      },
      shanchu1:function(){
        var that = this;
        axios.post('/api/tool/broadtable/delete')
        	.then(response => {
            if(response.data.msg.code == 0){
                this.$message.success("删除成功");
                this.getlist()
            }else{
                that.$message.error(response.data.msg.info);
            }

        	})
      },
      shanchu2:function(){
        var that = this;
        axios.post('/api/tool/broadorders/delete')
        	.then(response => {
        		this.getlist()
        	})
      },
      daoru1:function(){
        this.name3 = '导入值班数据'
        this.shangchuanleibie = 1
        this.log = true
      },
      daoru2:function(){
        this.name3 = '导入直播订单表'
        this.shangchuanleibie = 2
        this.log = true
      },
      changetime:function(){
        this.getlist()
      },
      xiazai1:function(){
        const a = document.createElement('a');
              a.setAttribute('download', '导入值班数据.xlsx');
              a.setAttribute('href', this.allurl+'static/moban/zhibo2.xlsx');
              a.click();
      },
      xiazai2:function(){
        const a = document.createElement('a');
              a.setAttribute('download', '导入直播订单表.xlsx');
              a.setAttribute('href', this.allurl+'static/moban/zhibo1.xlsx');
              a.click();
      },
      xiazai3:function(name){
        var that = this
        axios.get("/api/tool/broadorders/export?name="+name+"&month="+this.time)
          .then(function(response) {
            if(response.data.msg.code == 0){
                window.location.href = window.location.origin + '/' + response.data.data
            }else{
                that.$message.error(response.data.msg.info);
            }
          })
      },
      exportData:function(data){

        var that = this;
        var list = []
        //导入
        if(data.header[0] == "时间"){

            for(var i = 0 ;i < 48; i++){
              let obj = {
                date:i + 1
              }

              for(let m in data.results){
                console.log(data.results[m][(parseInt(i)+1)+'号'])
                obj['name'+ (parseInt(m)+1)] = data.results[m][(parseInt(i)+1)+'号']

              }
              list.push(obj)

            }
            console.log(list)
// console.log(list)
            // for(var i = 0 ;i < data.results.length; i++){
            //     var obj = {}
            //     obj['date'] = i + 1
            //     if(data.results[i]['时间'] = '07:00-07:30'){
            //       obj['name1'] = data.results[i]['1号']
            //     }

            //     // if(data.results[i]['07:30-08:00']){obj['name2'] = data.results[i]['07:30-08:00']}
            //     // if(data.results[i]['08:00-08:30']){obj['name3'] = data.results[i]['08:00-08:30']}
            //     // if(data.results[i]['08:30-09:00']){obj['name4'] = data.results[i]['08:30-09:00']}
            //     // if(data.results[i]['09:00-09:30']){obj['name5'] = data.results[i]['09:00-09:30']}
            //     // if(data.results[i]['09:30-10:00']){obj['name6'] = data.results[i]['09:30-10:00']}
            //     // if(data.results[i]['10:00-10:30']){obj['name7'] = data.results[i]['10:00-10:30']}
            //     // if(data.results[i]['10:30-11:00']){obj['name8'] = data.results[i]['10:30-11:00']}
            //     // if(data.results[i]['11:00-11:30']){obj['name9'] = data.results[i]['11:00-11:30']}
            //     // if(data.results[i]['11:30-12:00']){obj['name10'] = data.results[i]['11:30-12:00']}
            //     // if(data.results[i]['12:00-12:30']){obj['name11'] = data.results[i]['12:00-12:30']}
            //     // if(data.results[i]['12:30-13:00']){obj['name12'] = data.results[i]['12:30-13:00']}
            //     // if(data.results[i]['13:00-13:30']){obj['name13'] = data.results[i]['13:00-13:30']}
            //     // if(data.results[i]['13:30-14:00']){obj['name14'] = data.results[i]['13:30-14:00']}
            //     // if(data.results[i]['14:00-14:30']){obj['name15'] = data.results[i]['14:00-14:30']}
            //     // if(data.results[i]['14:30-15:00']){obj['name16'] = data.results[i]['14:30-15:00']}
            //     // if(data.results[i]['15:00-15:30']){obj['name17'] = data.results[i]['15:00-15:30']}
            //     // if(data.results[i]['15:30-16:00']){obj['name18'] = data.results[i]['15:30-16:00']}
            //     // if(data.results[i]['16:00-16:30']){obj['name19'] = data.results[i]['16:00-16:30']}
            //     // if(data.results[i]['16:30-17:00']){obj['name20'] = data.results[i]['16:30-17:00']}
            //     // if(data.results[i]['17:00-17:30']){obj['name21'] = data.results[i]['17:00-17:30']}
            //     // if(data.results[i]['17:30-18:00']){obj['name22'] = data.results[i]['17:30-18:00']}
            //     // if(data.results[i]['18:00-18:30']){obj['name23'] = data.results[i]['18:00-18:30']}
            //     // if(data.results[i]['18:30-19:00']){obj['name24'] = data.results[i]['18:30-19:00']}
            //     // if(data.results[i]['19:00-19:30']){obj['name25'] = data.results[i]['19:00-19:30']}
            //     // if(data.results[i]['19:30-20:00']){obj['name26'] = data.results[i]['19:30-20:00']}
            //     // if(data.results[i]['20:00-20:30']){obj['name27'] = data.results[i]['20:00-20:30']}
            //     // if(data.results[i]['20:30-21:00']){obj['name28'] = data.results[i]['20:30-21:00']}
            //     // if(data.results[i]['21:00-21:30']){obj['name29'] = data.results[i]['21:00-21:30']}
            //     // if(data.results[i]['21:30-22:00']){obj['name30'] = data.results[i]['21:30-22:00']}
            //     // if(data.results[i]['22:00-22:30']){obj['name31'] = data.results[i]['22:00-22:30']}
            //     // if(data.results[i]['22:30-23:00']){obj['name32'] = data.results[i]['22:30-23:00']}
            //     // if(data.results[i]['23:00-23:30']){obj['name33'] = data.results[i]['23:00-23:30']}
            //     // if(data.results[i]['23:30-23:59']){obj['name34'] = data.results[i]['23:30-23:59']}
            //     list.push(obj)
            // }
            this.shangchuanshuju = list
        }

        if(data.header[0] == "外部订单号"){
            console.log(data)
            for(var i = 0 ;i < data.results.length; i++){
                list.push(data.results[i]['外部订单号'])
            }
            this.shangchuanshuju = list
        }

      },
      shangchuan:function(){
        var that = this
        

        if(this.shangchuanleibie == 1){
          if(this.shangchuanshuju == ""){
            this.$message.error('先上传数据');
            return false
          }
          this.shangchuanzhong = true
          axios.post("/api/tool/broadtable/import", {month:this.time1,data:this.shangchuanshuju})
            .then(function(response) {
              if(response.data.msg.code == 0){
                  if(response.data.data.errors != ""){
                    var cuowu = ""
                    for(var i in response.data.data.errors){
                      cuowu = cuowu + response.data.data.errors[i]
                    }
                    that.$message.error(cuowu);
                  }else{
                    that.$message.success("导入成功");
                  }
                  that.shangchuanzhong = false
                  that.log = false
                  that.getlist()
              }else{
                  that.$message.error(response.data.msg.info);
                  that.shangchuanzhong = false
              }
            })
        }
        if(this.shangchuanleibie == 2){
          this.shangchuanxin()
          // axios.post("/api/tool/broadorders/import", {month:this.time1,data:this.shangchuanshuju})
          //   .then(function(response) {
          //     if(response.data.msg.code == 0){
          //         if(response.data.data.errors != ""){
          //           var cuowu = ""
          //           for(var i in response.data.data.errors){
          //             cuowu = cuowu + response.data.data.errors[i]
          //           }
          //           that.$message.error(cuowu);
          //         }else{
          //           that.$message.success("导入成功");
          //         }
          //         that.shangchuanzhong = false
          //         that.log = false
          //         that.getlist()
          //     }else{
          //         that.$message.error(response.data.msg.info);
          //         that.shangchuanzhong = false
          //     }
          //   })
        }
        this.getlist();

      },
			//翻页
			fanye:function(page){
				this.loading = true
				this.page = page
				this.getlist()
			},

			//获取
			getlist:function(){
        this.loading = true
				var that = this;
				axios.get('/api/tool/broadorders/list?page='+this.page+'&page_size='+this.pagesize+'&month='+this.time)
					.then(response => {
						that.total = response.data.data.total
						that.list = response.data.data.data
						that.loading = false
					})
			},

		}
	}
</script>
<style>
  .zhibo .el-button--primary{color: #FFF !important; background-color: #409EFF !important; border-color: #409EFF !important;}
  .zhibo .el-input__inner{ line-height: 32px !important; height: 32px !important;}
  .zhibo .btnp{ line-height: 32px !important; height: 32px !important; margin-bottom: 20px;}
</style>
<style lang="scss" scoped="scoped">
	.zhibo{ margin: 0; padding: 0; background: #EFEFEF;
    .flex{ display: flex;}
		.center{
			width: 1366px; margin: 0 auto; display: flex; justify-content: space-between;
			.right{
				flex-basis: 1166px; background: #FFF;
				.title{border-bottom: 1px #EAEAEA solid; line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272}
				.add{ padding: 20px 30px}
				.list{
					display: flex; text-align: center; color: #727272; line-height: 45px; margin: 0 20px; border: 1px #EAEAEA solid; margin-top: -1px;
					.th{ flex: 1; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
					.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid; }
				}
				.el-pagination{ text-align: right; margin: 20px 0}
			}
		}
		.result{ margin-top: 20px;}
	}
</style>
